<template>
  <ul v-loading="isLoading" class="container list-container">
    <li :class="item.isActive ? 'active' : ''" @click="handleContact(item.userInfo?.uid , item)" v-for="item in data">
      <item :data="item" :type="type"></item>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
import item from '@/components/contactList/contactListItem/index.vue'
import {useContactStore} from '../../stores/contact'
import { searchUser } from '../../api/user'

const { data = [] , type = 1} = defineProps(['data' , 'type'])

const contactStore = useContactStore()
const isLoading = ref(false)

const contactList = ref([
  {
    id: 1,
    nickname: '琪琪',
    avatar: 'https://img.tuxiangyan.com/zb_users/upload/2023/02/202302091675904133489339.jpg'
  },
  {
    id: 2,
    nickname: '琪琪',
    avatar: 'https://img.tuxiangyan.com/zb_users/upload/2023/02/202302091675904133489339.jpg'
  }
])

// 点击联系人时
const handleContact = (id , item) => {
  contactStore.currentContactId = id
  searchUser(id).then(res => {
    if (res.code === 200) {
      contactStore.contactInfo = res.data
      contactStore.contactInfo.applyInfo = item
    }
  })

  // contactStore.contactInfo = {
  //   id: 1,
  //   gender: 1,
  //   avatar: 'https://img.tuxiangyan.com/zb_users/upload/2023/02/202302091675904133489339.jpg',
  //   nickname: 'A-',
  //   weChatCode:'Zik-J_0522',
  //   areaName: '山东 青岛',
  //   remark: '租房',
  //   permission: '不让他（她）看朋友圈和状态',
  //   friendCircle: [
  //     'https://ts1.tc.mm.bing.net/th/id/OIP-C.3nrDn8IrD3x5iVX0PI6cDgHaLH?w=160&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
  //     'https://ts1.tc.mm.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo?w=255&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
  //   ],
  //   videoAccount: [
  //     'https://ts1.tc.mm.bing.net/th/id/OIP-C.3nrDn8IrD3x5iVX0PI6cDgHaLH?w=160&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
  //     'https://ts1.tc.mm.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo?w=255&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
  //   ],
  //   commonGroupNumber: 1,
  //   personalSignature: '忘记烦恼.',
  //   source:'通过名片分享添加'
  // }
  //
  data.forEach((item) => {
    item.isActive = item.id === contactStore.currentContactId
  })
}

</script>



<style scoped lang="less">
.list-container {
  display: flex;
  flex-direction: column;
  li {
    cursor: pointer;
    height: 70px;
  }

  .active {
    background-color: rgb(222, 222, 222);
  }

  li:hover {
    //background-color: rgb(234, 234, 234);
    background-color: rgb(222, 222, 222);
  }
}
</style>
